<template>
    <div class="container">
      <div class="header">
        <el-button class="back-button" @click="goBack">返回</el-button>
        <el-input
          class="search-input"
          placeholder="请输入搜索内容"
          v-model="searchQuery"
          clearable
          @input="filterList"
           @keyup.enter.native="search"
       
        >
        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
      </el-input>
     
      </div>
      <div class="list-container">
        <div class="level-1-list">
          <div v-for="level1 in dynamicMenuItems" :key="level1.id" class="level-1">
            <div class="level-1-name">{{ level1.name }}</div>
            <div class="level-2-list">
              <div v-for="level2 in level1.directory" :key="level2.id" class="level-2">
                <div class="level-2-name">{{ level2.name }}</div>
                <div class="level-3-list">
                  <div
                  @click="changes(level3)"
                    v-for="level3 in level2.function"
                    :key="level3.id"
                    class="level-3"
                  >
                    {{ level3.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getNavbar } from "@/api/index";
  export default {
    data() {
      return {
        portalPath:window.portalPath,
        dynamicMenuItems:[],
        searchQuery: '',
        list: [
          {
            id: 1,
            name: '一级名称1',
            children: [
              {
                id: 11,
                name: '二级名称1',
                children: [
                  { id: 111, name: '三级名称1' },
                  { id: 112, name: '三级名称2' },
                ],
              },
              {
                id: 12,
                name: '二级名称2',
                children: [{ id: 121, name: '三级名称3' }],
              },
            ],
          },
          {
            id: 2,
            name: '一级名称2',
            children: [
              {
                id: 21,
                name: '二级名称3',
                children: [{ id: 211, name: '三级名称4' }],
              },
            ],
          },
        ],
        filteredList: [],
        searchWord:''
      };
    },
    created() {
      // 初始化时显示所有数据
      this.filteredList = this.list;
      this.getlist();
    },
    methods: {
      search(){
       
        this.searchWord=this.searchQuery;
        this.getlist();
      },
      changes(level3){
   
      this.$router.push({
          path: "/iframe",
          query: {
            url: portalPath+"/r" + level3.url.replace('.',''),
            // url:lists.url
          },
        });
    },
        //获取菜单
    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.allnav",
        searchWord: this.searchWord,
      };
      getNavbar(param).then((res) => {
   
        this.dynamicMenuItems = res.data.nav;
      });
    },
      goBack() {
        // 返回逻辑
      this.$router.go(-1);
      },
      filterList() {
      
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6); /* 透明白色背景 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .back-button {
    margin-right: 20px;
  }
  
  .search-input {
    flex: 0  0 30%;
    height: 100%;
  }
  
  .list-container {
    margin-top: 10px;
  }
  
  .level-1-list {
    margin-bottom: 20px;
  }
  
  .level-1 {
    margin-bottom: 15px;
  }
  
  .level-1-name {
    font-size: 20px;
    font-weight: bold;
    color: #2980b9; /* 颜色调整 */
    padding: 10px 0;
    border-bottom: 2px solid #ecf0f1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  .level-2-list {
    padding-left: 20px;
  }
  
  .level-2 {
    margin-bottom: 10px;
  }
  
  .level-2-name {
    font-size: 16px;
    font-weight: bold;
    color: #333333; /* 颜色调整 */
    padding: 8px 0;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .level-3-list {
    display: flex; /* 使用 flexbox 行排列 */
    flex-wrap: wrap; /* 自动换行 */
    padding-left: 40px;
  }
  
  .level-3 {

   
    padding: 5px 10px; /* 添加左右内边距 */
    transition: color 0.3s, background-color 0.3s; /* 添加颜色和背景过渡效果 */
    border-radius: 4px; /* 圆角效果 */
    margin-right: 10px; /* 添加右边距 */
    cursor: pointer;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 13px;
    color: #333333;
  }
  
  .level-3:hover {
    color: #c0392b; /* 鼠标悬停时颜色变化 */
    background-color: rgba(236, 240, 241, 0.5); /* 悬浮效果背景 */
  }
  </style>
  